<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        .demo{
            margin-bottom:10px;
            border-top:1px solid #1b926c;
        }
         footer{
             color:#fff;
             background-color: #222;
             border-color: #080808;
             padding-top:60px;
             margin-top:100px;
         }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="../index.html">首页</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="javascript:void(0)">Link</a></li>
            <li><a href="javascript:void(0)">Link2</a></li>
        </ul>
    </div>
</nav>
 <div class="container" ng-app="MyAPP">
     <h3>Demo1: 多个控制器如何公用一个指令,指令与控制器交互示例</h3>
     <div class="row" ng-controller="FirstController">
         <mytag showMsgMethod="msg1()"></mytag>
     </div>
     <br>
     <div class="row" ng-controller="SecondController">
         <mytag showMsgMethod="msg2()"></mytag>
     </div>
 </div>
</body>
</html>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script>
    var myModule = angular.module('MyAPP',[]);
    myModule.controller('FirstController',function($scope){
        $scope.msg1 = function(){
            alert("aaa调用控制器1方法!");
        }
    });

    myModule.controller('SecondController',function($scope){
        $scope.msg2 = function(){
            alert("bbb调用控制器2方法!");
        }
    });

    myModule.directive('mytag',function(){
        return{
            restrict: "AE",
            replace: true,
            template: "<button class='btn btn-primary'>我是指令中的按钮,点我调用控制器方法</button>",
            link:function(scope,element,attr){
                element.bind("click",function(){
                    alert("aaaa");
                    //TODO 查询如何调用方法
                    //scope.showMsgMethod();
                    //scope.$apply("showMsgMethod()");
                    //scope.$apply(attr.showMsgMethod);

                });
            }
        }
    })

</script>